<template>
	<view class="content">
    <view class="search">
      <uni-search-bar placeholder="请输入搜索关键词" @confirm="search" cancelButton="none" radius="28">
        <template v-slot:searchIcon>
          <text class="iconfont icon-fangdajing" style="font-size: 36rpx;"></text>
        </template>
      </uni-search-bar>
    </view>
    <view style="height: 108rpx;"></view>  
    <view class="circle-content u-m-t-32">
      <view class="circle-events_img">
        <image src="https://cdn.uviewui.com/uview/swiper/1.jpg" mode="scaleToFill" class="events-img"></image>
      </view>
      <view>
        <scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll">
          <view class="u-p-t-32 u-p-l-32 u-p-b-32">
            <view class="scroll-circle-item_Hi" v-for="(item,index) in 5" :key="index">
              <image src="/static/image/main.png" mode="scaleToFill" class="scroll-img"></image>
            </view>
          </view>
        </scroll-view>
      </view>
      <!-- 圈子 -->
      <view class="u-m-t-16">
        <view class="circle-num_tips">
          <view class="u-flex">
            <view class="u-flex-1">
              <view class="circle-num_title">热门圈子</view>
            </view>
            <view class="more" @click="CircleAll">
              <view class="">查看更多</view>
            </view>
          </view>
        </view>
        <scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll">
          <view class="circle-item u-p-b-32">
            <view class="scroll-circle-item_H" v-for="(item,index) in 5" :key="index">
              <view class="list-item" v-for="(item,index) in 3" :key="index">
                <view class="list-item__container" @click="CircleJoin">
                  <view class="list-item__header">
                    <view class="list-item__icon">
                      <image src="/static/logo.png" mode="scaleToFill" class="list-item__icon-img"></image>
                    </view>
                  </view>
                  <view class="list-item__content list-item__content--center">
                    <text class="list-item__content-title">广东爱车族</text>
                    <text class="list-item__content-note">30人已加入</text>
                  </view>
                  <view class="list-item__extra">
                    <view class="list-item__extra-j">
                      <text class="iconfont icon-jiahao list-item__extra-icon"></text>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </scroll-view>
        
      </view>
      <view class="circle-num_tips u-m-t-32">
        <view class="u-flex">
          <view class="u-flex-1">
            <view class="circle-num_title">最新发帖</view>
          </view>
          <view class="more" @click="CircleNew(1,'想看什么？')">
            <view class="">查看更多</view>
          </view>
        </view>
      </view>
      <scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll">
        <view class="article">
          <view class="scroll-circle-item_H" v-for="(item,index) in 5" :key="index">
            <view class="article-item">
              <view class="article-item__container" @click="CircleNewDetail1">
                <view class="article-item__header">
                  <view class="article-item__icon">
                    <image src="/static/logo.png" mode="scaleToFill" class="article-item__icon-img"></image>
                  </view>
                </view>
                <view class="article-item__content article-item__content--center">
                  <text class="article-item__content-title">群昵称</text>
                  <text class="article-item__content-note">9分钟前·22浏览</text>
                </view>
                <view class="article-item__extra">
                  <view class="article-item__extra-j">
                    二次元文化交流
                    <u-icon name="arrow-right" size="28"></u-icon>
                  </view>
                </view>
              </view>
              <view class="article-item_text" @click="CircleNewDetail1">喜多川魅魔</view>
              <view class="article-item_img-grid">
                <u-upload ref="uUpload" 
                :file-list="fileList" 
                :show-progress="false" 
                width="197" 
                height="197" 
                :deletable="false" 
                :custom-btn="true"
                ></u-upload>
              </view>
              <view class="article-item_up">
                <view class="u-flex u-m-r-12" @click="CircleNewDetail1">
                  <iconfont name="icon-pinglun" size="46"></iconfont>
                  <text class="u-m-l-4">9999</text>
                </view>
                <view class="u-flex">
                  <iconfont name="icon-jiabahuo" size="46"></iconfont>
                  <text class="u-m-l-4">9999</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
      
      <view class="circle-num_tips u-m-t-32">
        <view class="u-flex">
          <view class="u-flex-1">
            <view class="circle-num_title">最新发帖</view>
          </view>
          <view class="more" @click="CircleNew(2,'砖家达人')">
            <view class="">查看更多</view>
          </view>
        </view>
      </view>
      <scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll">
        <view class="article">
          <view class="scroll-circle-item_H" v-for="(item,index) in 5" :key="index">
            <view class="article-item" @click="CircleNewDetail2">
              <view class="article-item__container">
                <view class="article-item__header">
                  <view class="article-item__icon">
                    <image src="/static/logo.png" mode="scaleToFill" class="article-item__icon-img"></image>
                  </view>
                </view>
                <view class="article-item__content article-item__content--center">
                  <text class="article-item__content-title">挖掘机</text>
                  <text class="article-item__content-note">9分钟前·22浏览</text>
                </view>
                <view class="article-item__extra">
                  <view class="article-item__extra-j">
                    知识科普
                    <u-icon name="arrow-right" size="28"></u-icon>
                  </view>
                </view>
              </view>
              <view class="article-item_text">分享一个PPT制作神器</view>
              <view class="article-item_img-text">
                <image src="/static/image/main.png" mode="scaleToFill" class="img"></image>
                <view class="opaticy">
                  <text>PPT的图片太丑啦!这四个方法完美解决。</text>
                </view>
              </view>
              <view class="article-item_up">
                <view class="u-flex u-m-r-12">
                  <iconfont name="icon-pinglun" size="46"></iconfont>
                  <text class="u-m-l-4">9999</text>
                </view>
                <view class="u-flex">
                  <iconfont name="icon-jiabahuo" size="46"></iconfont>
                  <text class="u-m-l-4">9999</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
      
      <view style="height: 100rpx;"></view> 
    </view>
  </view>
</template>

<script>
	export default {
		data() {
			return {
        fileList: []
			}
		},
		onLoad() {
      let arr = [];
      for (let i = 1; i <= 9; i++) {
        arr.push({'url': '/static/image/mm'+i+'.png'});
      }
      this.fileList = arr
		},
		methods: {
      scroll: function(e) {
      },
      CircleAll(){
        uni.navigateTo({
        	url: '/pages/Circle/CircleAll/CircleAll?Name=广东爱车族'
        });
      },
      CircleJoin(){
        uni.navigateTo({
        	url: '/pages/Circle/CircleJoin/CircleJoin?Name=广东爱车族'
        });
      },
      CircleNew(type,text){
        uni.navigateTo({
        	url: '/pages/Circle/CircleNew/CircleNew'+type+'?Name='+text
        });
      },
      CircleNewDetail1(){
        uni.navigateTo({
        	url: '/pages/Circle/CircleNewDetail/CircleNewDetail1?Name=喜多川魅魔'
        });
      },
      CircleNewDetail2(){
        uni.navigateTo({
        	url: '/pages/Circle/CircleNewDetail/CircleNewDetail2?Name=分享一个PPT制作神器'
        });
      },
		}
	}
</script>

<style lang="scss" scoped>
  .search{
    background-color: #ffffff;
    width: 100%;
    position: fixed;
    z-index: 1;
  }
  .img{
    width: 100%;
    height: 100%;
  }
	.content {
    .events-img{
      width: 100%;
      height: 100%;
      border-radius: 28rpx;
    }
    .circle-content{
      width: 100%;
      .circle-num_tips{
        padding: 0 32rpx;
      }
      //横向滚动 start
      .scroll-view_H {
        white-space: nowrap;
        width: 100%; 
      }
	  ::-webkit-scrollbar{
	  	display: none;
	  }
      //圈子 ---
      .scroll-circle-item_Hi{
        display: inline-block;
        white-space: normal;
        width: 580rpx;
        height: 200rpx;
        padding-right: 32rpx;;
        .scroll-img{
          width: 100%;
          height: 100%;
          border-radius: 28rpx;
        }
      }
      //圈子 ---
      
      //横向滚动 end
      .circle-events_img{
        width: 686rpx;
        height: 264rpx;
        border-radius: 28rpx;
        margin: 0 auto;
      }
    }
    .circle-item{
      padding: 0 32rpx;
      .list-item{
        display: flex;
        font-size: 32rpx;
        position: relative;
        justify-content: space-between;
        align-items: center;
        background-color: #fff;
        flex-direction: row;
        cursor: pointer;
        padding: 32rpx;
        margin-top: 24rpx;
        border-radius: 28rpx;
        .list-item__container{
          position: relative;
          display: flex;
          flex-direction: row;
          flex: 1;
          overflow: hidden;
          .list-item__header {
            display: flex;
            flex-direction: row;
            align-items: center;
            .list-item__icon{
              margin-right: 18rpx;
              flex-direction: row;
              justify-content: center;
              align-items: center;
              .list-item__icon-img{
                display: block;
                height: 90rpx;
                width: 170rpx;
                margin-right: 20rpx;
                border-radius: 16rpx;
              }
            }
          }
          .list-item__content{
            display: flex;
            padding-right: 16rpx;
            flex: 1;
            color: #3b4144;
            flex-direction: column;
            justify-content: space-between;
            overflow: hidden;
            .list-item__content-title{
              font-size: 32rpx;
              color: #3b4144;
              overflow: hidden;
            }
            .list-item__content-note{
              margin-top: 8rpx;
              color: #999;
              font-size: 24rpx;
              overflow: hidden;
            }
          }
          .list-item__content--center{
            justify-content: center;
          }
          .list-item__extra{
            display: flex;
            flex-direction: row;
            justify-content: flex-end;
            align-items: center;
            .list-item__extra-j{
              width: 52rpx;
              height: 52rpx;
              border-radius: 50rpx;
              background-color: #fed500;
              display: flex;
              align-items: center;
              justify-content: center;
              .list-item__extra-icon{
                font-size: 38rpx;
              }
            }
          }
        }
      }
    }
    .article{
      padding:32rpx;
      .article-item{
        position: relative;
        background-color: #fff;
        cursor: pointer;
        border-radius: 28rpx;
        .article-item__container{
          position: relative;
          display: flex;
          flex-direction: row;
          flex: 1;
          overflow: hidden;
          padding: 32rpx 0 0 32rpx;
          .article-item__header {
            display: flex;
            flex-direction: row;
            align-items: center;
            .article-item__icon{
              margin-right: 18rpx;
              flex-direction: row;
              justify-content: center;
              align-items: center;
              .article-item__icon-img{
                display: block;
                height: 80rpx;
                width: 80rpx;
                margin-right: 20rpx;
                border-radius: 50%;
                overflow: hidden;
              }
            }
          }
          .article-item__content{
            display: flex;
            padding-right: 16rpx;
            flex: 1;
            color: #3b4144;
            flex-direction: column;
            justify-content: space-between;
            overflow: hidden;
            .article-item__content-title{
              font-size: 28rpx;
              color: #3b4144;
              overflow: hidden;
            }
            .article-item__content-note{
              margin-top: 8rpx;
              font-size: 24rpx;
              overflow: hidden;
            }
          }
          .article-item__content--center{
            justify-content: center;
          }
          .article-item__extra{
            display: flex;
            flex-direction: row;
            justify-content: flex-end;
            align-items: center;
            .article-item__extra-j{
              background-color: #fed500;
              display: flex;
              align-items: center;
              justify-content: center;
              padding: 12rpx 8rpx;
            }
          }
        }
        .article-item_text{
          padding: 32rpx;
        }
        .article-item_img-grid{
          padding: 0 32rpx 0 32rpx;
        }
        .article-item_img-text{
          width: 100%;
          height: 264rpx;
          position: relative;
          .opaticy{
            width: 100%;
            height: 56rpx;
            line-height: 56rpx;
            background-color: rgba(0,0,0,0.5);
            position: absolute;
            bottom: 0px;
            color: #ffffff;
            padding: 0 24rpx;
          }
        }
        .article-item_up{
          display: flex;
          align-items: center;
          justify-content: flex-end;
          padding: 32rpx 32rpx 32rpx 0;
          .article-item_up-icon{
            font-size: 46rpx;
          }
        }
      }
    }
    .scroll-circle-item_H{
      display: inline-block;
      white-space: normal;
      width: 686rpx;
      height: 100%;
      margin-right: 16rpx;
    }
  }
</style>
